<template>
  <div>
    <!-- 首页导航部分 -->
    <van-nav-bar title="樊登讲书" left-text="返回" left-arrow>
      <template #right>
        <img
          src="../../assets/images/樊登讲书/search.png"
          alt=""
          @click="gotoSearch"
          style="width: 20px; height: 20px"
        />
      </template>
      <template #left>
        <img
          src="../../assets/images/樊登讲书/消息图标.png"
          alt=""
          style="width: 24px; height: 24px"
          v-if="isinfoshow"
          @click="goinformation"
        />
        <img
          v-else
          src="../../assets/images/樊登讲书/消息图标1.png"
          alt=""
          style="width: 18px; height: 18px"
          @click="goinformation"
        />
      </template>
    </van-nav-bar>
    <!-- 立即开通部分 -->
    <div class="open-immediately">
      <img src="../../assets/images/樊登讲书/头像.png" alt="" />
      <div class="main-info">
        <p class="main-name">
          <span>阿夏</span>
          <img
            src="../../assets/images/樊登讲书/比心.png"
            alt=""
            style="width: 15.5px; height: 14px"
          />
        </p>
        <p class="main-vip">每天一元加入vip专属特权</p>
      </div>
      <van-button type="primary" round color="#FDD303" @click="gotovip"
        >立即开通</van-button
      >
    </div>
    <!-- 轮播图部分 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../../assets/images/樊登讲书/banner.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/images/樊登讲书/banner.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/images/樊登讲书/banner.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/images/樊登讲书/banner.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/images/樊登讲书/banner.png" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 最近在学部分 -->
    <div class="recent-study">
      <p>最近在学</p>
    </div>
    <!-- 最近在学内容部分 -->
    <div class="recent-content">
      <ul>
        <li v-for="item in recentlist.result" :key="item.url">
          <img :src="item.url" alt="" />
          <p class="content-recent">{{ item.title }}</p>
          <p class="process">{{ item.havelearned }}</p>
        </li>
      </ul>
    </div>
    <!-- 三级导航部分  数据渲染 , 后续内容需要根据点击不同的标签，根据点击标签传达一个频道值，得到相应数据渲染到内容中 
      内容使用列表组件-->
    <van-tabs
      v-model:active="active"
      line-width="21px"
      line-height="4px"
      color="#F1D50A"
    >
      <van-tab title="全部">
        <div class="content-container">
          <div class="hot">
            <div class="hot-left">
              <p>
                最近上线
                <img src="../../assets/images/樊登讲书/toparrow.png" alt="" />
              </p>
              <span>最热门</span>
            </div>
            <div class="hot-right">
              <img src="../../assets/images/樊登讲书/squire.png" alt="" />
              <p>是否已读</p>
            </div>
          </div>
          <!-- 渲染的内容 -->
          <div
            class="content"
            v-for="item in contentlist.result"
            :key="item._id"
          >
            <div class="content-img">
              <img :src="item.url" alt="" />
            </div>
            <div class="title">
              <div class="title-one">
                <span>{{ item.title }}</span>
              </div>
              <div class="title-content">
                <span>{{ item.content }}</span>
              </div>
              <div class="time">
                <span>{{ item.rt }}上新</span>
              </div>
              <div class="airplay">
                <span>播放量{{ item.airplay }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="新浪">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="管理">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="职场">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="家庭">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="人文">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="创业">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="商业">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="读书">
        <div class="content" v-for="item in contentlist.result" :key="item._id">
          <div class="content-img">
            <img :src="item.url" alt="" />
          </div>
          <div class="title">
            <div class="title-one">
              <span>{{ item.title }}</span>
            </div>
            <div class="title-content">
              <span>{{ item.content }}</span>
            </div>
            <div class="time">
              <span>{{ item.rt }}上新</span>
            </div>
            <div class="airplay">
              <span>播放量{{ item.airplay }}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { mapActions, mapState } from "vuex";
export default {
  setup() {
    const active = ref(0);
    const router = useRouter();
    // 进入vip页面
    const gotovip = () => {
      router.push("/vip");
    };
    // 进入消息页面/
    const goinformation = () => {
      router.push("/information");
    };
    // 进入搜索页面
    const gotoSearch = () => {
      router.push("/search");
    };

    return { active, gotovip, goinformation, gotoSearch };
  },
  data() {
    return {
      isinfoshow: true,
    };
  },
  computed: {
    ...mapState({
      recentlist: (state) => state.recentdata.recentlist,
      contentlist: (state) => state.contentdata.contentlist,
    }),
  },
  methods: {
    ...mapActions(["getrecentdata"]),
    ...mapActions(["getcontentdata"]),
  },
  mounted() {
    this.getrecentdata();
    this.getcontentdata();
    if (localStorage.getItem("information")) {
      this.isinfoshow = false;
    }
  },
};
</script>

<style lang="less" scoped>
.open-immediately {
  display: flex;
  width: 347.5px;
  height: 80.5px;
  margin-left: 14px;
  justify-content: space-between;
  align-items: center;
  img {
    width: 38px;
    height: 39px;
  }
  .main-info {
    margin-left: -66.5px;
    width: 142px;
    height: 28px;
    margin-top: 8px;
    .main-vip {
      font-size: 12px;
      height: 13px;
    }
    .main-name {
      position: relative;
      font-size: 13px;
      margin-top: -5px;
      span {
        position: absolute;
        top: 0;
        left: 0;
      }
      img {
        margin-top: 2px;
        margin-left: 27px;
      }
    }
  }
  .van-button {
    width: 83px;
    height: 28px;
    font-size: 12.5px;
  }
  .van-tag {
    color: #000;
  }
}
// 轮播图样式
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 121.25px;
  text-align: center;
  img {
    width: 347.55px;
    height: 121.25px;
  }
}
// 最近在学部分
.recent-study {
  margin-left: 14px;
  width: 347.55px;
  height: 49.5px;
  line-height: 49.5px;
  p {
    font-size: 17.5px;
    font-weight: 500;
  }
}
.recent-content {
  height: 146px;
  width: 360px;
  margin-left: 15px;
  overflow: auto;
  ul {
    display: flex;
    height: 100%;
    overflow: auto;
    li {
      display: flex;
      flex-direction: column;
      width: 79.5px;
      margin-right: 13.5px;
      height: 100%;
      img {
        width: 79.5px;
        height: 106.5px;
      }
      .content-recent {
        font-size: 13px;
        margin-top: 6.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
      }
      .process {
        font-size: 12px;
        margin-top: 3px;
        color: #999;
      }
    }
  }
}
// 热门样式
.hot {
  display: flex;
  width: 347.5px;
  margin-left: 14px;
  margin-top: 10px;
  height: 26px;
  justify-content: space-between;
  align-items: center;
  .hot-left {
    display: flex;
    width: 126.5px;
    height: 26px;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 12px;
      width: 77px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border: 2px solid #e3eb8a;
      border-radius: 13px;
      border-color: #fefcf0;
      img {
        width: 5.5px;
        height: 10.5px;
        vertical-align: middle;
      }
    }
    span {
      font-size: 12px;
    }
  }
  .hot-right {
    img {
      width: 10px;
      height: 10.5px;
      margin-right: 3px;
      margin-top: 5px;
    }
    p {
      display: inline-block;
      font-size: 12px;
      height: 26px;
      line-height: 21px;
    }
  }
}
.content {
  display: flex;
  width: 341.5px;
  height: 113.5px;
  margin-left: 14px;
  margin-bottom: 30px;
  .content-img {
    width: 85.5px;
    height: 113.5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    display: flex;
    flex-direction: column;
    width: 234px;
    height: 113.5px;
    margin-left: 15px;
    .title-one {
      font-size: 15px;
      font-weight: bold;
    }
    .title-content {
      margin-top: 11.5px;
      font-size: 12px;
      color: #999;
    }
    .time {
      margin-top: 10.5px;
      font-size: 10px;
      color: #999;
    }
    .airplay {
      font-size: 13px;
      color: #ae8c4f;
      margin-top: 29px;
    }
  }
}
.content-container {
  margin-bottom: 50px;
}
</style>
